<template>
  <div class="person">
    <h2>TsDemo</h2>
    <div>{{ age }}</div>
    <div>{{ name }}</div>
    <div>{{ marry }}</div>
    <div>{{ dream }}</div>
    <div>{{ future }}</div>
    <div>{{ uniKey }}</div>
    <div>{{ info }}</div>
    <div>{{ obj }}</div>
    <div>{{ arr }}</div>
    <a href="http://localhost:5173/ts-common" id="aaa" ref="bbb">asdfas</a>
  </div>
</template>

<script lang="ts" setup name="TsCommon">
import { onMounted } from 'vue'
// 已有类型 number/string/boolean/null/undefined/symbol/object
let age:number = 0;
let name:string = '张三';
let marry:boolean = true; 
let dream:null = null;
let future:undefined = undefined;
let uniKey:symbol = Symbol('s1');
let info = {
  [uniKey]: '张三'
}
let obj:{title: string, count: number} = {title: '张三', count: 1};
let arr:number[] = [1, 2, 3]; // 写法一
// let arr: Array<number> = [1, 2, 3]; // 写法二

// 联合类型
let timer:number|null = null;

// 自定义类型(类型别名)
type s = string;
let title:s = '标题'
// 接口 interface 接口名  {属性1: 类型1, 属性2: 类型2}
interface person {
  name: string,
  age: number,
  say: () => void
}
let user:person = {
  name: '张三',
  age: 1,
  say: function() {
    console.log('hello')
  }
}
// 函数类型
type fn = (a: number, b: number) => number;
let add:fn = (a, b) => a + b;
// let add:fn = function(a, b) {
//   return a + b
// }
// function add(a: number, b:number): number {
//   return a + b
// }
function set(a: number, b?:number): void {
  console.log(a, b);
}
// 接口继承
// interface 接口2 extends 接口1 {
//  属性1： 类型1， // 接口2中特有的类型 
//  }
interface person1 extends person {
  marry: boolean
}
let user1:person1 = {
  name: '张三',
  age: 1,
  say: function() {
    console.log('hello')
  },
  marry: true
}
// 元组
let c:[number, string] = [1, '1'];
// 字面量类型
let str1 = 'hello TS'
const str2 = 'hello TS'
// 字面量类型一般是配合联合类型一起使用
type type = 'add' | 'edit';
let operateAdd:type = 'add';
// 枚举 enum 枚举名 { 可取值1, 可取值2,.. }
enum Color {
  Red,
  Green,
  Blue
}
let style0color:Color = Color.Red;
let style1color:Color = 1;
// any 当类型设置为 any 时，就取消了类型的限制
// 临时使用 any 来“避免”书写很长、很复杂的类型

// 类型断言 as 简单来说类型断言就是 使用as关键词 强行指定获取到的结果类型
// 值 as 类型
let hh: string | number;
hh = 'hello';
console.log((hh as string).length);

onMounted(() => {
  const aaa = document.getElementById('aaa') as HTMLAnchorElement;
  console.log(aaa.href);
})
</script>